<template>
	<view class="pf-container">

		<view class="pf-list">
			<view class="pf-item" v-for="(item, index) in pfList" :key="index" @click="navigateToDetail(item)">
				<image class="item-icon" :src="item.icon" mode="aspectFit"></image>
				<view class="item-info">
					<text class="item-title">{{item.title}}</text>
					<text class="item-desc">{{item.desc}}</text>
				</view>
				<text class="item-arrow">></text>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="float-button" @click="handleRecordClick">
			<u-icon name="order" color="#ffffff" size="38"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pfList: [{
						title: '零钱理财',
						desc: '灵活存取，收益稳健',
						icon: '/static/images/change.png',
						path: '/pages/pf/change'
					},
					{
						title: '工资理财',
						desc: '每月定投，积少成多',
						icon: '/static/images/salary.png',
						path: '/pages/pf/salary'
					},
					{
						title: '期限理财',
						desc: '固定期限，收益更高',
						icon: '/static/images/term.png',
						path: '/pages/pf/term'
					},
					{
						title: '基金理财',
						desc: '专业管理，分散投资',
						icon: '/static/images/fund.png',
						path: '/pages/pf/fund'
					},
					{
						title: '银行推荐',
						desc: '安全可靠，收益稳定',
						icon: '/static/images/bank.png',
						path: '/pages/pf/bank'
					}
				]
			}
		},
		onLoad() {
		},
		methods: {
			navigateToDetail(item) {
				uni.navigateTo({
					url: item.path,
					success: () => {
						console.log('跳转成功：', item.title);
					},
					fail: (err) => {
						console.error('跳转失败：', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			handleRecordClick() {
				// uni.showToast({
				// 	title: '点击了记录按钮',
				// 	icon: 'none'
				// });
				uni.navigateTo({
					url: "/pages/pf/record"
				})
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: "/pages/pf/message"
			})
		}
	}
</script>

<style>
	.pf-container {
		padding: 20rpx;
		position: relative;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.pf-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.pf-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.item-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.item-info {
		flex: 1;
	}

	.item-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.item-desc {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.item-arrow {
		color: #999;
		font-size: 32rpx;
	}

	/* 悬浮按钮样式 */
	.float-button {
		position: fixed;
		right: 40rpx;
		bottom: 15%;
		width: 100rpx;
		height: 100rpx;
		background-color: #2979ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.3);
		z-index: 999;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.3);
		}
	}
</style>